
// Photos use background images since we can't control the dimensions of
// submitted avatars. This centers whatever is added, which hopefully creates a
// good cropping effect.
.c-avatar {
	@include avatar-size("tiny");

	background-position: center;
	background-size: cover;
	border-radius: 100%;
	cursor: pointer;
	display: block;
	filter: var(--image-filter);

	// User Queries
	@media screen and (prefers-reduced-motion: reduce) {
		transition: none;
	}

	@media screen and (-ms-high-contrast: active) {
		-ms-high-contrast-adjust: none;
	}
}
